<template>
	<view class="user-list">
		<van-cell-group custom-class="user-list-item">
			<view class="user-list-photo van-hairline--bottom">
				<view class="user-info-photo" @click="chooseImage">
					<image v-if="userInfo.head" :src="userInfo.head" mode="aspectFill"></image>
					<image v-else src="../../../static/touxiang.png" mode="aspectFill"></image>
				</view>
				<text class="user-list-photo-name">{{userInfo.name || userInfo.tel}}</text>
			</view>
			<van-cell title="昵称" is-link center url="/pages/user/reset/resetName">
				<text class="color-9">修改</text>
				<van-icon slot="right-icon" name="arrow" class="van-cell__right-icon" />
			</van-cell>
		</van-cell-group>

		<van-cell-group custom-class="user-list-item">
			<van-cell title="绑定手机号" is-link center v-if="userInfo.tel">
				<text class="color-9">{{userInfo.tel}}</text>
				<van-icon slot="right-icon" name="arrow" class="van-cell__right-icon" />
			</van-cell>
			<van-cell title="交易密码" is-link center url="/pages/user/reset/resetTradersPwd">
				<text class="color-9">修改</text>
				<van-icon slot="right-icon" name="arrow" class="van-cell__right-icon" />
			</van-cell>
			<van-cell title="修改密码" is-link center url="/pages/user/reset/resetPwd">
				<text class="color-9">修改</text>
				<van-icon slot="right-icon" name="arrow" class="van-cell__right-icon" />
			</van-cell>
		</van-cell-group>

		<view class="user-list-btn" @click="onLogOut">退出登录</view>
	</view>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
	name: 'UserIndex',
	data() {
		return {};
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		})
	},
	methods: {
		...mapActions(['logOut', 'setUserInfo']),
		chooseImage() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: res => {
					uni.showLoading({
						title:'上传中'
					})
					this.$http.upload_one({
						url: '/user/userhead',
						uid: this.userInfo.id,
						path: res.tempFilePaths[0]
					})
					.then(e => {
						if (e.msg === 'ok') {
							this.userInfo.head = this.imgUrl + e.head
							this.setUserInfo(this.userInfo)
							uni.showToast({
								title: '修改成功', 
								icon: 'none'
							});
							return
						}
						uni.showToast({
							title: e.msg, 
							icon: 'none'
						});
					})
				}
			});
		},
		onLogOut() {
			uni.showModal({
				title: '提示',
				content: '确定退出登录？',
				success: res => {
					if (res.confirm) {
						this.logOut()
						try {
							uni.setStorageSync('lab_userInfo', {});
						} catch (e) {
							// error
						}
						uni.showToast({
							title: '退出成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/user/login/index'
							});
						}, 1000);
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.color-9 {
	color: #999;
}
image {
	width: 100%;
	height: 100%;
}
.user-list-item {
	margin-bottom: 20upx;
}
.user-list {
	&-photo {
		padding: 40upx 0;
		text-align: center;
		background-color: #fff;
		.user-info-photo {
			width: 120upx;
			height: 120upx;
			margin: 0 auto 20upx auto;
			text-align: center;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
				0 2px 4px -1px rgba(0, 0, 0, 0.2);
		}
		&-name {
		}
	}

	&-item {
		margin-bottom: 20upx;
	}
	&-btn {
		padding: 10px 15px;
		line-height: 24px;
		color: #333;
		text-align: center;
		overflow: hidden;
		background-color: #fff;
	}
}
</style>
